<template>
 
    <div style="background-color: lightgrey;height: 100%;width: 100%;overflow-y: auto;">
      <div id="head">
        <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />
      </div>
    </div>
<div id="quanbu">
    <div style="background-color:lightgrey">
      <van-swipe>
        <van-swipe-item v-for="item in items" :key="item">
          <van-image height="100%" width="100%" :src="item.picture" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div style="margin: 5px 5px; background-color: white;padding: 5px;" v-if="lists">
      <h3 style="display: inline-block;">{{ lists.name }}</h3>
      <br />
      <p style="font-size: 25px;">￥{{ lists.price }}</p>
      <div class="wenzi">
        <div class="yunfei">
          <span>运费：免运费</span>
        </div>
        <div class="shengyu">
          <span>剩余：{{ lists.stock }}</span>
        </div>
      </div>
      <p style="margin-top: 10px;">{{}}</p>
    </div>

    

    <div v-if="lists">

      <div class="wenzi">
        <div class="yunfei">
          <span>发货 &nbsp;&nbsp;&nbsp;陕西宝鸡</span>
        </div>
        <div class="shengyu">
          <span>保障 &nbsp;&nbsp;&nbsp;坏单赔付，假一赔十，急速退款</span>
        </div>
        <div class="canshu">
          <span>参数 &nbsp;&nbsp;&nbsp;品牌：枝纯 价格：100-200</span>
        </div>
        <br />
        <div v-html="lists.description"></div>
      </div>
    </div>
    
<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" />
  <van-action-bar-icon icon="shop-o" @click="onClickCart" text="购物车" />
  <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="addCart()"/>
  <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
</van-action-bar>


  </div>
</template>

<style scoped>
#quanbu {
  height: 100%;
  padding-bottom: 50px;
}

:deep(img){
  width: 100%;
  height: auto;
}
</style>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import {useCartData} from '../store/index.js';
import { getGoodsDetail,getGoodsAlbum } from '../api/jiekou.js';
import { showToast } from 'vant';
const router = useRouter()
const carData = useCartData();
const props = defineProps({
  detailiId: Number,
})
const items = ref([])
const lists = reactive({})
const isNotFound = ref(false)

onMounted(() => {
  // getImgData();
  // getDetailData();
  loadGoodsDetail()

})
const onClickCart = () => {
  router.push({ path: '/gouwuche' })
}
  // const getImgData = () => {
  //   request({
  //     url: '/home/goods/album',
  //     method: 'get',
  //     params: {
  //       goods_id: props.detailiId,
  //     }
  //   }).then(res => {
  //     // console.log(res.data.data);
  //     items.value = res

  //   }).catch(err => {
  //     console.log(err);


  //   })
  // }

  // const getDetailData = () => {
  //   request({
  //     url: '/home/goods',
  //     method: 'get',
  //     params: {
  //       id: props.detailiId
  //     }
  //   }).then(result => {
  //     lists.value = result
  //   })
  //   // .catch(error => {
  //   //   console.log(error);

  //   // })
  // }
  // 加载商品详情
  const loadGoodsDetail = async () => {
  const data1 = await getGoodsDetail({ id: props.detailiId })
  if (!data1.id) {
    isNotFound.value = true
    return
  }
  const data2 = await getGoodsAlbum({ goods_id: props.detailiId })
  if (data2.length === 0 && data1.picture !== '') {
    data2.push({ picture: data1.picture })
  }
  Object.assign(lists, data1)
  items.value = data2
}
const onClickLeft = () => {
  history.back()
}

//加入购物车
const addCart = () => {

  console.log(lists,'11111');
  lists.checked = true;
  carData.addCar(lists)
  showToast('添加成功')
  // console.log(carData.shopcar,22222);
  
  
}


</script>